<%@ Page Title="选品中心" Language="C#" MasterPageFile="~/ASP/Home.Master" AutoEventWireup="true"
    CodeBehind="SelectProduct.aspx.cs" Inherits="Agricultural_Sales.ASP.SelectProduct" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <style>
            .filter-section {
                background: white;
                border-radius: 15px;
                padding: 30px;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                margin-bottom: 30px;
            }

            .product-grid {
                background: white;
                border-radius: 15px;
                padding: 30px;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            }

            .product-card {
                border: none;
                border-radius: 15px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
                transition: all 0.3s ease;
                margin-bottom: 30px;
                overflow: hidden;
                height: 100%;
            }

            .product-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            }

            .product-image {
                height: 220px;
                object-fit: cover;
                width: 100%;
            }

            .price-tag {
                background: linear-gradient(45deg, #FF6B6B, #FF8E53);
                color: white;
                padding: 8px 16px;
                border-radius: 25px;
                font-weight: bold;
                font-size: 16px;
                display: inline-block;
            }

            .filter-btn {
                background: linear-gradient(45deg, #4CAF50, #66BB6A);
                border: none;
                border-radius: 10px;
                padding: 12px 25px;
                color: white;
                font-weight: bold;
                transition: all 0.3s ease;
            }

            .filter-btn:hover {
                background: linear-gradient(45deg, #388E3C, #4CAF50);
                transform: translateY(-2px);
            }

            .reset-btn {
                background: linear-gradient(45deg, #FF9800, #FFB74D);
                border: none;
                border-radius: 10px;
                padding: 12px 25px;
                color: white;
                font-weight: bold;
                transition: all 0.3s ease;
            }

            .reset-btn:hover {
                background: linear-gradient(45deg, #F57C00, #FF9800);
                transform: translateY(-2px);
            }

            .add-to-cart-btn {
                background: linear-gradient(45deg, #2196F3, #42A5F5);
                border: none;
                border-radius: 25px;
                padding: 10px 20px;
                color: white;
                font-weight: bold;
                transition: all 0.3s ease;
                width: 100%;
            }

            .add-to-cart-btn:hover {
                background: linear-gradient(45deg, #1976D2, #2196F3);
                transform: translateY(-2px);
            }

            .stock-badge {
                position: absolute;
                top: 15px;
                right: 15px;
                background: rgba(76, 175, 80, 0.9);
                color: white;
                padding: 6px 12px;
                border-radius: 20px;
                font-size: 12px;
                font-weight: bold;
            }

            .out-of-stock {
                background: rgba(244, 67, 54, 0.9);
            }

            .origin-tag {
                background: #E8F5E8;
                color: #2E7D32;
                padding: 4px 10px;
                border-radius: 12px;
                font-size: 12px;
                margin-top: 8px;
                display: inline-block;
            }

            .section-title {
                color: #2E7D32;
                font-weight: bold;
                margin-bottom: 25px;
                position: relative;
                padding-bottom: 15px;
            }

            .section-title::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 60px;
                height: 3px;
                background: linear-gradient(45deg, #4CAF50, #81C784);
                border-radius: 2px;
            }

            .filter-control {
                border-radius: 10px;
                border: 2px solid #e9ecef;
                padding: 12px 15px;
                font-size: 14px;
                transition: all 0.3s ease;
            }

            .filter-control:focus {
                border-color: #4CAF50;
                box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
            }

            .pagination-container {
                display: flex;
                justify-content: center;
                margin-top: 40px;
            }

            .pagination .page-link {
                color: #4CAF50;
                border: 1px solid #4CAF50;
                margin: 0 2px;
                border-radius: 8px;
            }

            .pagination .page-link:hover {
                background-color: #4CAF50;
                color: white;
            }

            .pagination .page-item.active .page-link {
                background-color: #4CAF50;
                border-color: #4CAF50;
            }

            .sort-section {
                background: #f8f9fa;
                padding: 15px;
                border-radius: 10px;
                margin-bottom: 20px;
            }

            .product-count {
                color: #666;
                font-size: 14px;
                margin-bottom: 15px;
            }

            .no-products {
                text-align: center;
                padding: 60px 20px;
                color: #666;
            }

            .no-products i {
                font-size: 64px;
                color: #ddd;
                margin-bottom: 20px;
            }
        </style>
    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <div class="container mt-4">
            <!-- 筛选区域 -->
            <div class="filter-section">
                <h3 class="section-title">🔍 商品筛选</h3>
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">商品分类</label>
                        <asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-select filter-control">
                            <asp:ListItem Value="0" Text="全部分类" Selected="True"></asp:ListItem>
                        </asp:DropDownList>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">价格范围</label>
                        <asp:DropDownList ID="ddlPriceRange" runat="server" CssClass="form-select filter-control">
                            <asp:ListItem Value="0" Text="不限价格" Selected="True"></asp:ListItem>
                            <asp:ListItem Value="1" Text="0-10元"></asp:ListItem>
                            <asp:ListItem Value="2" Text="10-50元"></asp:ListItem>
                            <asp:ListItem Value="3" Text="50-100元"></asp:ListItem>
                            <asp:ListItem Value="4" Text="100元以上"></asp:ListItem>
                        </asp:DropDownList>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">商品名称</label>
                        <asp:TextBox ID="txtProductName" runat="server" CssClass="form-control filter-control"
                            placeholder="输入商品名称搜索..."></asp:TextBox>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">产地</label>
                        <asp:TextBox ID="txtOrigin" runat="server" CssClass="form-control filter-control"
                            placeholder="输入产地搜索..."></asp:TextBox>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-6">
                        <asp:CheckBox ID="chkInStock" runat="server" Text="仅显示有库存商品" CssClass="form-check-input me-2" />
                        <label class="form-check-label fw-bold" for="chkInStock">仅显示有库存商品</label>
                    </div>
                    <div class="col-md-6 text-end">
                        <asp:Button ID="btnFilter" runat="server" Text="🔍 筛选" CssClass="btn filter-btn me-2"
                            OnClick="btnFilter_Click" />
                        <asp:Button ID="btnReset" runat="server" Text="🔄 重置" CssClass="btn reset-btn"
                            OnClick="btnReset_Click" />
                    </div>
                </div>
            </div>

            <!-- 商品展示区域 -->
            <div class="product-grid">
                <!-- 排序和统计信息 -->
                <div class="sort-section">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <asp:Label ID="lblProductCount" runat="server" CssClass="product-count" Text="共找到 0 件商品">
                            </asp:Label>
                        </div>
                        <div class="col-md-6 text-end">
                            <label class="form-label me-2">排序方式：</label>
                            <asp:DropDownList ID="ddlSortBy" runat="server" CssClass="form-select d-inline-block"
                                Style="width: auto;" AutoPostBack="true"
                                OnSelectedIndexChanged="ddlSortBy_SelectedIndexChanged">
                                <asp:ListItem Value="0" Text="默认排序" Selected="True"></asp:ListItem>
                                <asp:ListItem Value="1" Text="价格从低到高"></asp:ListItem>
                                <asp:ListItem Value="2" Text="价格从高到低"></asp:ListItem>
                                <asp:ListItem Value="3" Text="库存从多到少"></asp:ListItem>
                                <asp:ListItem Value="4" Text="按产品名称"></asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </div>
                </div>

                <h3 class="section-title">🛒 商品列表</h3>

                <!-- 商品网格 -->
                <div class="row" id="productContainer">
                    <asp:Repeater ID="rptProducts" runat="server">
                        <ItemTemplate>
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                                <div class="card product-card h-100">
                                    <div class="position-relative">
                                        <img src='<%# ResolveUrl("~" + Eval("ImageUrl")) %>' class="product-image"
                                            alt='<%# Eval("Name") %>'
                                            onerror="this.src='../Image/default-product.jpg'" />
                                        <div class="stock-badge <%# Convert.ToInt32(Eval(" Inventory"))> 0 ? "" :
                                            "out-of-stock" %>">
                                            <%# Convert.ToInt32(Eval("Inventory"))> 0 ? "库存: " + Eval("Inventory") :
                                                "缺货" %>
                                        </div>
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h5 class="card-title text-truncate mb-2">
                                            <%# Eval("Name") %>
                                        </h5>
                                        <div class="origin-tag mb-2">📍 <%# Eval("Origin") %>
                                        </div>
                                        <p class="card-text text-muted small flex-grow-1">
                                            <%# Eval("Descr") %>
                                        </p>
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div class="price-tag">¥<%# Eval("Price", "{0:F2}" ) %>/<%# Eval("Unit") %>
                                            </div>
                                            <small class="text-muted">ID: <%# Eval("ProductId") %></small>
                                        </div>
                                        <asp:Button ID="btnAddToCart" runat="server"
                                            Text='<%# Convert.ToInt32(Eval("Inventory")) > 0 ? "🛒 加入购物车" : "暂时缺货" %>'
                                            CssClass="btn add-to-cart-btn" CommandName="AddToCart"
                                            CommandArgument='<%# Eval("ProductId") %>'
                                            Enabled='<%# Convert.ToInt32(Eval("Inventory")) > 0 %>'
                                            OnCommand="btnAddToCart_Command" />
                                    </div>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>

                <!-- 无商品提示 -->
                <asp:Panel ID="pnlNoProducts" runat="server" Visible="false" CssClass="no-products">
                    <i class="fas fa-search"></i>
                    <h4>暂无相关商品</h4>
                    <p>请尝试调整筛选条件或搜索关键词</p>
                </asp:Panel>

                <!-- 分页控件 -->
                <div class="pagination-container">
                    <asp:DataPager ID="dpProducts" runat="server" PagedControlID="rptProducts" PageSize="12">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="true"
                                ShowLastPageButton="true" FirstPageText="首页" LastPageText="末页" NextPageText="下一页"
                                PreviousPageText="上一页" ButtonCssClass="btn btn-outline-success me-1" />
                            <asp:NumericPagerField ButtonType="Button"
                                NumericButtonCssClass="btn btn-outline-success me-1"
                                CurrentPageLabelCssClass="btn btn-success me-1" />
                        </Fields>
                    </asp:DataPager>
                </div>
            </div>
        </div>

        <script src="../Scripts/jquery-3.7.0.min.js"></script>
        <script src="../Scripts/bootstrap.bundle.min.js"></script>
        <script>
            // 添加到购物车动画效果
            $(document).ready(function () {
                $('.add-to-cart-btn').click(function () {
                    if (!$(this).prop('disabled')) {
                        $(this).html('✅ 已添加');
                        setTimeout(() => {
                            $(this).html('🛒 加入购物车');
                        }, 2000);
                    }
                });
            });
        </script>
    </asp:Content>